<script setup>
import UserInfo from '@/components/UserInfo.vue'

defineProps({
  box: Object
})
</script>

<template>
  <div class="draw-item">
    <div class="draw-user">
      <UserInfo :nickname="box.nickname" :avatar="box.avatar" :id="box.user_id"></UserInfo>
    </div>
    <div class="draw-price">
      ￥{{ box.price }} <span style="color: orange">X{{ box.num }}</span
      >
	  <span> / {{ box.num }}</span>
    </div>
	
	<UserInfo :avatar="box.box_prize_image"></UserInfo>
    <div class="draw-info">
      <van-text-ellipsis :rows="2" :content="box.blind_box_prize_name"></van-text-ellipsis>
      <div>{{ box.created_at }}</div>
    </div>
    <!--  <div class="draw-time">
    <div>总{{box.total_price}} 付{{box.pay_price}}</div>
    <div>{{box.created_at}}</div>
  </div>-->
  </div>
</template>

<style scoped lang="less">
.draw-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  border-bottom: 1px solid #f5f5f5;

  .draw-price {
    white-space: nowrap;
    font-size: 12px;
    margin: 0 5px;
  }

  .draw-info {
    /* width: 150px; */
    font-size: 12px;
    text-align: end;
  }

  .draw-user {
    flex: 1;
  }

  .draw-time {
    text-align: center;
    font-size: 12px;
  }
}
</style>
